<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>Document</title>
  <link rel="stylesheet" href="../../css/member/TradingRecord.css">
  <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
  <script src="../../js/public/jquery-3.3.1.js"></script>
</head>

<body>
  <div id="nav"></div>
  <form class="layui-form" action="">
    <div class="main">
      <div class="left">
        <ul>
          <li class="active">会员管理</li>
          <li>会员信箱</li>
          <li>交易额导入</li>
          <li>用户升级记录</li>
          <li>推荐图谱</li>
          <li>交易量记录</li>
          <li>佣金设置</li>
        </ul>
      </div>
      <div class="right">
        <div class="top">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label wdStyle">手机号码：</label>
              <input type="text" name="title" style="width:196px;" placeholder="请输入…" class="layui-input">
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">账号：</label>
              <input type="text" name="title" style="width:196px;" placeholder="请输入…" class="layui-input">
            </div>
            <div class="layui-inline">
              <button class="layui-btn" lay-submit="" lay-filter="demo1">查询</button>
            </div>
            <div class="layui-inline">
              <button class="layui-btn" lay-submit="" lay-filter="demo1">重置</button>
            </div>
            <!-- 展开 -->
          </div>
        </div>

        <div class="button">
          <table class="layui-table" lay-skin="nob">
            <thead>
              <tr>
                <th><input type="checkbox" name="" lay-skin="primary"></th>
                <th>序号</th>
                <th>会员账号</th>
                <th>姓名</th>
                <th>电话</th>
                <th>奖励建仓金额</th>
                <th>时间</th>
                <th>数量</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><input type="checkbox" name="" lay-skin="primary"></td>
                <td>01</td>
                <td>12345@123.com</td>
                <td>张三</td>
                <td>13000000000</td>
                <td>800.00</td>
                <td>2018.01.01 18:00:00</td>
                <td>20000.0</td>
              </tr>
              <tr>
                <td><input type="checkbox" name="" lay-skin="primary"></td>
                <td>01</td>
                <td>12345@123.com</td>
                <td>张三</td>
                <td>13000000000</td>
                <td>800.00</td>
                <td>2018.01.01 18:00:00</td>
                <td>20000.0</td>
              </tr>
              <tr>
                <td><input type="checkbox" name="" lay-skin="primary"></td>
                <td>01</td>
                <td>12345@123.com</td>
                <td>张三</td>
                <td>13000000000</td>
                <td>800.00</td>
                <td>2018.01.01 18:00:00</td>
                <td>20000.0</td>
              </tr>
              <tr>
                <td><input type="checkbox" name="" lay-skin="primary"></td>
                <td>01</td>
                <td>12345@123.com</td>
                <td>张三</td>
                <td>13000000000</td>
                <td>800.00</td>
                <td>2018.01.01 18:00:00</td>
                <td>20000.0</td>
              </tr>
              <tr>
                <td><input type="checkbox" name="" lay-skin="primary"></td>
                <td>01</td>
                <td>12345@123.com</td>
                <td>张三</td>
                <td>13000000000</td>
                <td>800.00</td>
                <td>2018.01.01 18:00:00</td>
                <td>20000.0</td>
              </tr>
              <tr>
                <td><input type="checkbox" name="" lay-skin="primary"></td>
                <td>01</td>
                <td>12345@123.com</td>
                <td>张三</td>
                <td>13000000000</td>
                <td>800.00</td>
                <td>2018.01.01 18:00:00</td>
                <td>20000.0</td>
              </tr>
              <tr>
                <td><input type="checkbox" name="" lay-skin="primary"></td>
                <td>01</td>
                <td>12345@123.com</td>
                <td>张三</td>
                <td>13000000000</td>
                <td>800.00</td>
                <td>2018.01.01 18:00:00</td>
                <td>20000.0</td>
              </tr>
              <tr>
                <td><input type="checkbox" name="" lay-skin="primary"></td>
                <td>01</td>
                <td>12345@123.com</td>
                <td>张三</td>
                <td>13000000000</td>
                <td>800.00</td>
                <td>2018.01.01 18:00:00</td>
                <td>20000.0</td>
              </tr>
              <tr>
                <td><input type="checkbox" name="" lay-skin="primary"></td>
                <td>01</td>
                <td>12345@123.com</td>
                <td>张三</td>
                <td>13000000000</td>
                <td>800.00</td>
                <td>2018.01.01 18:00:00</td>
                <td>20000.0</td>
              </tr>
              <tr>
                <td><input type="checkbox" name="" lay-skin="primary"></td>
                <td>01</td>
                <td>12345@123.com</td>
                <td>张三</td>
                <td>13000000000</td>
                <td>800.00</td>
                <td>2018.01.01 18:00:00</td>
                <td>20000.0</td>
              </tr>
              <tr>
                <td><input type="checkbox" name="" lay-skin="primary"></td>
                <td>01</td>
                <td>12345@123.com</td>
                <td>张三</td>
                <td>13000000000</td>
                <td>800.00</td>
                <td>2018.01.01 18:00:00</td>
                <td>20000.0</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="paging">
          <div id="demo3"></div>
        </div>
      </div>
    </div>
  </form>
  <script src="../../layui/layui.js"></script>
  <script>
    $("#nav").load("../public/nav.html")
  </script>
  <script>
    layui.use('element', function () {
      var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

      //监听导航点击
      element.on('nav(demo)', function (elem) {
        //console.log(elem)
        layer.msg(elem.text());
      });
    });
  </script>
  <script>
    layui.use('form', function () { })

    layui.use('table', function () {
      var table = layui.table;

      table.render({
        elem: '#test'
        , url: '/demo/table/user/'
        , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        , cols: [[
          { type: 'checkbox', fixed: 'left' }
          , { field: 'userid', title: '会员账号', width: 130, }
          , { field: 'username', title: '姓名' }
          , { field: 'rank', title: '级别' }
          , { field: 'teamrank', title: '团队级别' }
          , { field: 'cardid', title: '身份证号' } //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
          , { field: 'performance', title: '个人业绩' }
          , { field: 'allperformance', title: '团队业绩' }
          , { field: 'departmentperformance', title: '部门业绩' }
          , { field: 'deal', title: '交易量' }
          , { field: 'dealbuild', title: '交易量建仓' }
          , { field: 'recommend', title: '推荐人' }
          , { field: 'time', title: '注册时间' }
          , { field: 'activate', title: '激活状态' }
          , { field: 'state', title: '状态' }
          , { field: 'operation', title: '操作' }
        ]]
      });
    });


    layui.use(['laypage', 'layer'], function () {
      var laypage = layui.laypage
        , layer = layui.layer;
      // laypage.render({
      //   elem: 'demo3'
      //   , count: 100
      //   , first: '首页'
      //   , prev: '<em><</em>'
      //   , next: '<em>></em>'
      // });
      laypage.render({
        elem: 'demo3'
        , prev: '<em><</em>'
        , next: '<em>></em>'
        , count: 100
        , layout: ['limit', 'skip', 'prev', 'page', 'next']
        , jump: function (obj) {
          console.log(obj)
        }
      });
    })
  </script>
</body>

</html>